<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#updatingDiv').hide();
		$('#childCommentDiv').hide();
		
		$('img[name=commentUpdateBtn]').click(function(){
			$('#childCommentDiv').hide();
			$('#commentWritingDiv').hide();
			$('#updatingDiv').show();
			$('#updateTextArea').focus();
		});

		$('img[name=childCommentBtn]').click(function(){
			$('#commentWritingDiv').hide();
			$('#updatingDiv').hide();
			$('#childCommentDiv').show();
			$('#commentContent').focus();
		});
		
		$('#returnBtn1, #returnBtn2').click(function(){
			$('#updatingDiv').hide();
			$('#childCommentDiv').hide();
			$('#commentWritingDiv').show();
		});
	});

	function move(command) {
		if(command=="getAll"){
			location.href="/OffTheRecord/getBoardListByPage.action?pageNo=1";
		}else if(command=="update"){
			location.href="/OffTheRecord/updateBoardView.action?boardId="+${ requestScope.map.bvo.boardId };
		}else if(command=="delete" && confirm("정말 삭제하시겠습니까?")){
			location.href="/OffTheRecord/deleteBoard.action?boardId="+${ requestScope.map.bvo.boardId };
		}
	}
	
	function comment(cmd, commentId, boardId){
		if(cmd=="delete" && confirm("정말 삭제하시겠습니까?")){
			location.href="/OffTheRecord/deleteComment.action?commentId="+commentId+"&&boardId="+boardId;
		}
	}
	
	var content;
	var cid;
	var bid;
	function commentUpdate(commentContent, commentId, boardId){
		content=commentContent;
		cid=commentId;
		bid=boardId;
		document.getElementById("updateTextArea").value=content;
		document.getElementById("updateBoardId").value=bid;
		document.getElementById("updateCommentId").value=cid;
		location.href="#updateTextArea";
	}
	
	var pcid;
	function childComment(commentId){
		pcid=commentId;
		document.getElementById("parentCommentId").value=pcid;
		location.href="#childCommentDiv";
	}
	
	function checkVoid1(){
		var textArea=document.getElementById("updateTextArea").value;
		if(textArea==null || textArea==""){
			alert("내용을 입력하세요.");
			return false;
		}
	}
	
	function checkVoid2(){
		var textArea=document.getElementById("writeTextArea").value;
		if(textArea==null || textArea==""){
			alert("내용을 입력하세요.");
			return false;
		}
	}
	function checkVoid3(){
		var textArea=document.getElementById("childTextArea").value;
		if(textArea==null || textArea==""){
			alert("내용을 입력하세요.");
			return false;
		}
	}
</script>
</head>
<body>
<c:import url="../common/top.jsp"></c:import>
<div class="container" style="margin: 30px;"></div>

<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2- col-lg-2"></div>
<!--  -->
<div class="col-xs-12 col-sm-8 col-md-8- col-lg-8">
	<hr color="lightgray">
<div class="bs-example">
	  <div style="height: 10px; background-color: white;"></div>
	  <font style="font-weight: bold; font-size: 20px;">자유게시판</font><p><p>
      <div class="table-responsive">
        <table class="table">
          <tr>
            <td colspan="2">
            	<font color="#8C8C8C" size="2px">제목 : </font>
            	<font style="font-weight: bold;">${ requestScope.map.bvo.boardTitle }</font>
           	</td>
          	<td align="right">
          		<font color="#8C8C8C">${ requestScope.map.bvo.boardWriteDate }</font>
          	</td>
          </tr>
          <tr>
            <td>
            	<font color="#8C8C8C" size="2px">작성자 : </font>
            	${ requestScope.map.bvo.boardUserId }
            </td>
            <td>
            	<font color="#8C8C8C" size="2px">조회수 : </font>
            	${ requestScope.map.bvo.boardHits }
            </td>
            <td align="right">
            	<c:if test="${ sessionScope.userVo!=null }">
            		<font color="#8C8C8C" size="2px">첨부파일 : </font>
            		<a href="/OffTheRecord/downloadFile.action?fileName=${ requestScope.map.fvo.fileName }">
           			${ requestScope.map.fvo.fileName }
           		</c:if>
           	</td>
          </tr>
          <tr>
            <td colspan="3">${ requestScope.map.bvo.boardContent }</td>
          </tr>
        </table>
        <div style="float: right;">
			<button class="btn btn-default btn-sm" onclick="move('getAll')">목록</button>
			<c:if test="${ sessionScope.userVo.userId==requestScope.map.bvo.boardUserId }">
				<button class="btn btn-default btn-sm" onclick="move('update')">수정</button>
				<button class="btn btn-default btn-sm" onclick="move('delete')">삭제</button>
			</c:if>
		</div>
      </div><p><p>
</div>
<div class="jumbotron" style="background-color: white; border: 1px solid lightgray;">
	<div class="table-responsive">
		<c:forEach var="comment" items="${ requestScope.map.commentList }" >
			<table>
				<tr>
					<td>
						<c:forEach begin="1" end="${ comment.jump }">&nbsp;&nbsp;&nbsp;&nbsp;</c:forEach><c:if test="${ comment.jump>0 }">▶&nbsp;</c:if>
					</td>
					<td>
						<font color="#003399">${ comment.commentUserId }</font>
					</td>
					<td align="right" width="100%">
						<font color="#8C8C8C" size="2px">${ comment.commentWriteDate }</font>&nbsp;
						<c:if test="${ sessionScope.userVo!=null && comment.commentContent!='삭제된 댓글입니다.' }">
							<img src="./img/buttonReply.gif" title="댓글" alt="댓글" width="20" height="17" name="childCommentBtn" onclick="childComment('${ comment.commentId }')">
						</c:if>
						<c:if test="${ sessionScope.userVo.userId==comment.commentUserId && comment.commentContent!='삭제된 댓글입니다.' }">
							<img src="./img/buttonModifyE.gif" alt="수정" width="20" height="17" name="commentUpdateBtn" onclick="commentUpdate('${ comment.commentContent }', '${ comment.commentId }', '${ requestScope.map.bvo.boardId }')">
							<img src="./img/buttonDeleteX.gif" alt="삭제" width="12" height="13" name="commentDeleteBtn" onclick="comment('delete', '${ comment.commentId }', '${ requestScope.map.bvo.boardId }')">
						</c:if><p>
					</td>
				</tr>
				<tr>
					<td>
						<c:forEach begin="1" end="${ comment.jump }">&nbsp;&nbsp;&nbsp;&nbsp;</c:forEach>
					</td>
					<td colspan="2">
						<font size="2px">${ comment.commentContent }</font>
					</td>
				</tr>
			</table>
			<hr color="lightgray;" style="margin: 5px;">
		</c:forEach>
	</div>
	
	<!-- /.table-responsive -->
	<hr color="lightgray;">
	<div id="updatingDiv">
   		<form action="/OffTheRecord/updateComment.action" method="post" onsubmit="return checkVoid1()">
   			<input type="hidden" name="boardId" id="updateBoardId">
			<input type="hidden" name="commentId" id="updateCommentId">
			<textarea rows="3" cols="80" name="commentContent" id="updateTextArea"  class="form-control"></textarea>
			<div align="center"><br>
			<input type="submit" value="확인" class="btn btn-default btn-sm">
			<input type="button" value="취소" id="returnBtn1" class="btn btn-default btn-sm">
			</div>
		</form>
	</div>
	
	<c:if test="${ sessionScope.userVo!=null }">
	<div id="commentWritingDiv">
		<form action="/OffTheRecord/writeParentComment.action" method="post" onsubmit="return checkVoid2()">
			<input type="hidden" name="boardId" value="${ requestScope.map.bvo.boardId }">
			<input type="hidden" name="commentUserId" value="${ sessionScope.userVo.userId }">
			<textarea rows="3" cols="80" id="writeTextArea" class="form-control" name="commentContent" placeholder="댓글을 입력하세요."></textarea>
			<div align="center"><br>
			<input class="btn btn-default btn-sm" type="submit" value="확인">
			</div>
		</form>
	</div>
	
	<div id="childCommentDiv">
   		<form action="/OffTheRecord/writeChildComment.action" method="post" onsubmit="return checkVoid3()">
			<input type="hidden" name="boardId" value="${ requestScope.map.bvo.boardId }">
			<input type="hidden" name="parentCommentId" id="parentCommentId">
   			<input type="hidden" name="commentUserId" value="${ sessionScope.userVo.userId }">
			<textarea rows="3" cols="80" id="childTextArea" class="form-control" name="commentContent" placeholder="선택한 댓글에 대한 댓글을 입력합니다."></textarea>
			<div align="center"><br>
			<input type="submit" value="확인" class="btn btn-default btn-sm">
			<input type="button" value="취소" id="returnBtn2" class="btn btn-default btn-sm">
			</div></div></div>
		</form>
	</div>
	</c:if>
</div>
</div>
<!--  -->
<div class="col-sm-2 col-md-2- col-lg-2"></div>
</div><!-- row -->
</div><!-- container --> 
</body>
</html>